import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Platform,
  Picker,
  Image,
} from 'react-native';

import Config from '../../config';
import Colors from '../../common/Colors';
import CommonStyles from '../../common/CommonStyles';
import SizeUtils from '../../common/SizeUtils';
import TImage from '../../components/TImage';
import CommonListPage from '../common/CommonListPage';
import {DateUtils} from '../../utils/Utils';
import CommonAvatarView from '../common/CommonAvatarView';
import NoticeIcon from '../user/NoticeIcon';
import QZ_Reply2me from '../../actions/quanzi/QZ_Reply2me';
import QZ_MypostsAction from '../../actions/quanzi/QZ_MypostsAction';
import QZ_OwnedAction from '../../actions/quanzi/QZ_OwnedAction';
import QZ_MyspaceAction from '../../actions/quanzi/QZ_MyspaceAction';
import QuanziPostListItemView from "./QuanziPostListItemView";

const SORT_ARR=[
  {key:'1',name:'我的帖子'},
  {key:'2',name:'我的评论'},
  {key:'3',name:'回复我的'},
];
export default class QuanziZonePage extends CommonListPage {
	constructor(props) {
      super(props);
      this.select_index=0;
	}
  componentDidMount() {
    this.initData(); 
  }
  _dealEnterPage() {
    this.initData(); 
    this.props.initEnterPage&&this.props.initEnterPage();
  }
  initData(){
    new QZ_MyspaceAction().call(this, {})
  }
	_getViewStyle() {
      return {paddingTop:0,
        backgroundColor:"#ffffff"}
  	}
	_getListViewStyle() {
      return {
        width:SizeUtils.getWindowSize().width,
        paddingTop:0,
        height:(SizeUtils.getWindowSize().height - Config.paddingTop-SizeUtils.translateDesignHeightToCode(420)),
        backgroundColor:"#ff0"};
  	}
  	_renderTopView(){
      const  mydata = this.state.mydata||{};
  	  const {userData} = this.props.pageData.routeData;
  	  return(<View style={{width:SizeUtils.getWindowSize().width}}>
  		<View style={{
  			height:SizeUtils.translateDesignHeightToCode(360),
  			width:SizeUtils.getWindowSize().width,
  		}}>
  		<Image resizeMode={'stretch'} source={require("../../../resource/images/user/wodebg.png")}
  			style={{position: "absolute",top:0,left:0,height:SizeUtils.translateDesignHeightToCode(360),width:SizeUtils.getWindowSize().width,}}/>
  			{this._renderTitleView()}
  			<View style={{
  				flexDirection:"row",
  				paddingLeft:SizeUtils.translateDesignWidthToCode(40),
  				paddingRight:SizeUtils.translateDesignWidthToCode(40),
  				alignItems: 'center',
  				}}>
  				<CommonAvatarView avatarUri={this._getImageSource(userData)} size={110}/>
  				<Text style={{marginLeft:SizeUtils.translateDesignWidthToCode(20),
            		fontSize:SizeUtils.translateFontSizeToCode(36),
            		backgroundColor:'#fff0',
            		color:'#fff', fontFamily:'STHeitiSC-Medium',
          		}}> {userData.nick} </Text>
  			</View>
  			<View style={{
  				flexDirection:"row",
  				width:SizeUtils.getWindowSize().width,
  				paddingLeft:SizeUtils.translateDesignWidthToCode(40),
  				paddingRight:SizeUtils.translateDesignWidthToCode(40),
  				alignItems: 'flex-end',
  				justifyContent: 'center',
  				height:SizeUtils.translateDesignHeightToCode(130)
  				}}>
  				<View style={{
  					width:SizeUtils.translateDesignWidthToCode(100),
  					height:SizeUtils.translateDesignHeightToCode(130),
  					marginRight:SizeUtils.translateDesignWidthToCode(100),
  					}}>
  					<TouchableOpacity style={{flex:1,alignItems: 'center',justifyContent: 'center',}}
  						onPress={()=>{this.gotoPage(Config.pages.quanzi_follow,{title:'粉丝',isFan:true})}}>
  						<Text style={{marginLeft:SizeUtils.translateDesignWidthToCode(20),
            				fontSize:SizeUtils.translateFontSizeToCode(32),
            				backgroundColor:'#fff0',
            				color:'#fff', 
          				}}> {mydata.followed_num||0} </Text>
  						<Text style={{marginLeft:SizeUtils.translateDesignWidthToCode(20),
            				fontSize:SizeUtils.translateFontSizeToCode(24),
            				backgroundColor:'#fff0',
            				color:'#fff9', 
          				}}> {'粉丝'} </Text>
  					</TouchableOpacity>
  				</View>
  				<View style={{width:1,height:SizeUtils.translateDesignHeightToCode(100),backgroundColor:'#fff9'}}/>
  				<View style={{
  					width:SizeUtils.translateDesignWidthToCode(100),
  					marginLeft:SizeUtils.translateDesignWidthToCode(100),
  					height:SizeUtils.translateDesignHeightToCode(130),
  					}}>
  					<TouchableOpacity style={{flex:1,alignItems: 'center',justifyContent: 'center',}}
  						onPress={()=>{this.gotoPage(Config.pages.quanzi_follow,{title:'关注',isFan:false})}}>
  						<Text style={{marginLeft:SizeUtils.translateDesignWidthToCode(20),
            				fontSize:SizeUtils.translateFontSizeToCode(32),
            				backgroundColor:'#fff0',
            				color:'#fff', 
          				}}> {mydata.follow_num||0} </Text>
  						<Text style={{marginLeft:SizeUtils.translateDesignWidthToCode(20),
            				fontSize:SizeUtils.translateFontSizeToCode(24),
            				backgroundColor:'#fff0',
            				color:'#fff9', 
          				}}> {'关注'} </Text>
  					</TouchableOpacity>
  				</View>
  			</View>
  		</View>
  		<View style={{backgroundColor:'#f2f2f2',height:10}}/>
  		<View style={{
              flexDirection:"row",
              borderColor:'#eeeeee',
              borderBottomWidth:SizeUtils.translateDesignHeightToCode(3),
              height:SizeUtils.translateDesignHeightToCode(80),
              justifyContent:"space-around",
            }}>
              {SORT_ARR.map((item,index)=> this._getSortButton(item,index) )}
          </View>
  	  </View>);
  	}
  	_getSortButton(typeData,index) {
     return (
      <TouchableOpacity
        key={typeData.key}
        onPress = {() => {
          if (this.select_index!==index) {
            this.select_index=index;
            this.setState({d:'df'});
            // this.clear();
            this.doRefresh();
          }
        }}
        style={[{
          borderColor:'#eeeeee',
          flex:1,
          alignItems: 'center',
          justifyContent: 'center',
          borderRightWidth:SizeUtils.translateDesignWidthToCode(3)
        }]}>
          <Text style={[CommonStyles.secondaryText,
              {textAlign:"center",color:index===this.select_index?'#ee3535':'#000',
              fontSize:SizeUtils.translateFontSizeToCode(30),
              backgroundColor:"#00000000", borderWidth:0,}]}>{typeData.name}
          </Text>
      </TouchableOpacity>
     )
    }
  	_renderTitleView(){
  	return (
        <View style={{flexDirection:"row", height:SizeUtils.translateDesignHeightToCode(Platform.OS === "ios"?130:66),
            width:SizeUtils.getWindowSize().width,
            paddingTop:Config.tabBarTop,
            justifyContent:"space-between",
            backgroundColor:'#0000'}}>
          	<View style={{width:SizeUtils.translateDesignWidthToCode(200), paddingLeft:SizeUtils.translateDesignWidthToCode(40),}}>
      		</View>
          	<View style={{height:SizeUtils.translateDesignNumToCode(30),marginTop:0}}>
          		<Text style={{textAlign:'center',
            		fontSize:SizeUtils.translateFontSizeToCode(36),
            		color:'#fff', fontFamily:'STHeitiSC-Medium',
          		}}> {'我的空间'} </Text>
        	</View>
        	 <View style={{width:SizeUtils.translateDesignWidthToCode(200), paddingRight:SizeUtils.translateDesignWidthToCode(40),
              alignItems:"flex-end"}}>
              {this._renderNavigationBarRightButtonContent()}
           </View>
        </View>
    )
  }
  	_renderNavigationBarRightButtonContent() {
    return (
      <View style={{flexDirection:'row',alignItems: 'center',}}>
        <NoticeIcon isWhite={true} authorization={this.props.authorization}/>
      </View>
    )
  	}
  	_showPopover(ref) {
      this._popoverbtn.measure((ox, oy, width, height, px, py) => {
        this.props.showMoreRightBtn&&this.props.showMoreRightBtn({x:px-20, y:Platform.OS !== 'ios'?py-5:py-30, width: 0, height: 45})
      });
  	}
    _onRenderItem(data, index) {
      if (data.comments) {
        return (<QuanziPostListItemView isNoFollow={true} comments={data.comments} data={data.post} key={index}/>)
      }
      return (<QuanziPostListItemView isNoFollow={true} data={data} key={index}/>)
    }
  	_requestData(page, listView) {
      if (this.select_index===2) {
        this._currentPage1 = 0;
        new QZ_Reply2me().call(listView, {page:page,page_size:10,board_type:2})
      }else if (this.select_index===1) {
        if (this._currentPage1!==1) {
          this._currentPage1 = 1;
          new QZ_MypostsAction().call(listView, {page:page,page_size:100,board_type:2})
        }
      }else if (this.select_index===0) {
        this._currentPage1 = 0;
        new QZ_OwnedAction().call(listView, {board_id:101,page:page,page_size:10,dataKey:'listData'})
      }
  	}
  	_getImageSource(data) {
    if(data.avatar_url) {
     return data.avatar_url
    }
    else {
      return "";
    }
  }
}